<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="UTF-8">
  <title>登录界面</title>
    <link href="../css/login.css" type="text/css" rel="stylesheet" >
    <script type="text/javascript" src="../js/number.js"></script>
	
	
</head>

<body class="one">
	
<div class="two">
	<form action="/adminlogin" onsubmit="return check()">
	<h1>欢迎登录</h1>
	<div class="three">
		<p><input type="text" size="35px"  placeholder="请输入账号" name="username" required style="height: 35px; background-color: rgba(0,0,0,0);"/></p>
		<p><input type="password" size="35px"  placeholder="请输入密码" password="password" required style=" height: 35px; background-color: rgba(0,0,0,0);"/></p>
		<p>
			<input type="text" id="vcode" placeholder="请输入验证码" value="请输入验证码" onfocus="this.value=''" onblur="if(this.value=='')this.value='验证码'" style="height: 35px; background-color: rgba(0,0,0,0);"/>
		</p>
		<p>
		    <span  id="code" title="请点击查看" style=" background-color: gainsboro; "></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="#code" id="code1">看不清换一张</a>
		</p>
	    <p>
		   <input type="submit" style="height: 35px; width: 300px; background-color: skyblue;" >
	    </p>
		<p><a href="#">没有账号，请点击注册！</a></p>
	</div>
</form>
 </div>

<script type="text/javascript">

	var code; //声明一个变量用于存储生成的验证码
	document.getElementById("code1").onclick = changeImg;
	function changeImg() {
		var arrays = new Array(
				'1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
				'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
				'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
				'U', 'V', 'W', 'X', 'Y', 'Z'
		);
		code = ''; //重新初始化验证码
		//alert(arrays.length);
		//随机从数组中获取四个元素组成验证码
		for(var i = 0; i < 4; i++) {
			//随机获取一个数组的下标
			var r = parseInt(Math.random() * arrays.length);
			code += arrays[r];
		}
		document.getElementById('code').innerHTML = code; //将验证码写入指定区域
	}

	//效验验证码(表单被提交时触发)
	function check() {
		//获取用户输入的验证码
		var input_code = document.getElementById('vcode').value;
		if(input_code.toLowerCase() == code.toLowerCase()) {
			//验证码正确(表单提交)
			return true;
		}
		alert("请输入正确的验证码!");
		//验证码不正确,表单不允许提交
		return false;
	}

</script>


</body>



</html>